今天我們一樣要來講的是hover屬性的用法，最常見的大概就是圖片上的變化(背景)，很多公司的官方網站，或是學校網頁都會在主頁上放自己要宣傳的圖片，有時候會把圖片的註解設定在滑鼠游標到圖片上時才跳出來，我們先來看看輔仁大學網站的首頁吧!
可以注意一下首頁中左側的四張圖片，當你把滑鼠移到圖片上時，那一格就會切換成圖片的說明。
所以現在要來講得就是hover和background的搭配使用方法。
<div class="picture" ></div>
<style>
.picture{background: url("圖片1的路徑");
}
.picture: hover{background: url("圖片2的路徑");
}
</style>
只要在一般class後面加上":hover"就可以對原本的class做滑鼠移到上面時所執行的程式碼，也就是放上兩張不同圖片的URL就能成功在滑鼠移過去時切換圖片囉!
iThome鐵人賽
看影片追技術